<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .router-link-exact-active,
        .router-link-active {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-link to="/home">首页</router-link>
        <router-link to="/vip">会员</router-link>
        <router-link to="/cart">购物车</router-link>

        <router-view></router-view>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
            template: `<h1>这是home组件</h1>`
        };
        const Vip = {
            template: `<h1>这是vip组件</h1>`
        };
        const Cart = {
            template: `<h1>这是cart组件</h1>`
        };

        const router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                component: Home
            }, {
                path: '/Vip',
                component: Vip
            }, {
                path: '/Cart',
                component: Cart
            }]
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            router: router
        })
    </script>
</body>

</html>